'use client';

import { Box, Typography, Button } from '@mui/material';

export default function TestPage() {
  return (
    <Box sx={{ p: 4 }}>
      <Typography variant="h4" sx={{ mb: 2 }}>
        DataOps 界面测试页面
      </Typography>
      
      <Typography variant="body1" sx={{ mb: 2 }}>
        如果你能看到这个页面，说明修改已经生效。
      </Typography>
      
      <Button 
        variant="contained" 
        onClick={() => window.location.href = '/'}
        sx={{ 
          bgcolor: '#1976d2',
          color: 'white',
          '&:hover': {
            bgcolor: '#1565c0'
          }
        }}
      >
        返回首页查看DataOps界面
      </Button>
      
      <Box sx={{ mt: 4, p: 3, bgcolor: '#1a1a1a', borderRadius: 2 }}>
        <Typography variant="h6" sx={{ color: 'white', mb: 2 }}>
          深色导航栏样式测试
        </Typography>
        <Typography variant="body2" sx={{ color: 'white', opacity: 0.8 }}>
          这个深色背景应该和导航栏的颜色一致 (#1a1a1a)
        </Typography>
      </Box>
      
      <Box sx={{ 
        mt: 4, 
        p: 3, 
        background: 'linear-gradient(135deg, #ff6b9d 0%, #c44569 25%, #6c5ce7 50%, #74b9ff 100%)',
        borderRadius: 2 
      }}>
        <Typography variant="h6" sx={{ color: 'white', mb: 2 }}>
          渐变背景测试
        </Typography>
        <Typography variant="body2" sx={{ color: 'white', opacity: 0.9 }}>
          这个渐变背景应该和主横幅的颜色一致
        </Typography>
      </Box>
    </Box>
  );
}